<template>
    <div class="box" ref="map">
        地图
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts';
import chinaJSON from './china.json';
//获取DOM元素
let map = ref();
//注册中国地图
echarts.registerMap('china', chinaJSON as any)
onMounted(() => {
    //初始化案例
    let mychart = echarts.init(map.value);
    //设置配置项
    mychart.setOption({
        //地图组件
        geo: [{
            map: 'china',//中国地图
            roam: true,//鼠标缩放效果
            left: 150,
            right: 80,
            top: 150,
            bottom: 0,
            //地图上的文字设置
            label: {
                show: true,//文字显示出来
                color: 'white',//文字颜色
                fontSize: 13,//字体大小

            },
            //每一个多边形的样式
            itemStyle: {
                // color:"yellow",//图形颜色,支持渐变
                color:// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgb(150, 204, 243)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgb(28, 101, 192)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                opacity: 0.8,//透明度
            },
            //地图高亮的效果
            emphasis: {
                itemStyle: {
                    color: 'rgb(243, 245, 87)',
                },
                label: {
                    fontSize: 20
                }
            }
        }],
        //布局位置
        grid: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
        },
        series: [{
            type: 'lines',//航线系列
            data: [
                {
                coords: [
                    [116.405285,
                    39.904989],  // 起点
                    [113.280637,
                    23.125178]   // 终点
                ],
                // 统一的样式设置
                lineStyle: {//航线样式
                    color:'rgb(11, 23, 159)',
                    width:'4'
                },   
            },
            {
                coords: [
                    [101.778916,
                    36.623178],  // 起点
                    [102.712251,
                    25.040609]   // 终点
                ],
                // 统一的样式设置
                lineStyle: {//航线样式
                    color:'rgb(11, 23, 159)',
                    width:'4'
                },   
            },
        ],
            //线特效的配置
            effect:{
                    show:true,
                    symbol:'arrow',
                    // 支持矢量图
                    // symbol:'<svg t="1715227216437" class="icon" viewBox="0 0 1121 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4683" width="200" height="200"><path d="M700.065799 373.027761q116.507301 104.243374 209.508743 189.068865 39.857761 35.769785 77.671534 71.028574t67.451595 63.36362 47.522715 47.011718 17.884893 21.972868l0 61.319632q0 4.087975-17.884893-1.532991t-47.522715-17.373896-67.451595-27.593834-77.671534-33.214801q-93.001442-40.879755-209.508743-95.04543l0 193.156841q26.571841 19.417883 50.077699 37.813773 20.439877 15.329908 40.879755 30.148819t31.68181 22.994862q13.28592 9.197945 15.329908 18.906887t2.043988 22.994862l0 34.747791q0 8.175951-16.862899 10.730936t-40.368758-8.686948q-11.241933-6.131963-40.879755-18.39589t-63.36362-26.571841-64.896611-26.571841-46.500721-18.39589q-2.043988 0-3.576979-0.510997t-3.576979-0.510997-3.576979 0.510997-3.576979 0.510997q-15.329908 6.131963-46.500721 18.39589t-64.896611 26.571841-63.36362 26.571841-40.879755 18.39589q-23.505859 11.241933-40.368758 8.686948t-16.862899-10.730936l0-34.747791q0-13.28592 2.043988-22.994862t15.329908-18.906887q11.241933-8.175951 31.68181-22.994862t40.879755-30.148819q23.505859-18.39589 50.077699-37.813773l0-193.156841q-117.529295 54.165675-210.530737 95.04543-39.857761 17.373896-77.160537 33.214801t-66.940598 27.593834-47.522715 17.373896-17.884893 1.532991l0-61.319632q0-3.065982 17.884893-21.972868t47.522715-47.011718 66.940598-63.36362 77.160537-71.028574q93.001442-84.825491 210.530737-189.068865l0-231.992608q0-34.747791 10.219939-58.764647t25.549847-39.346764 33.214801-23.505859 33.725798-12.263926 26.060844-4.598972 11.241933-0.510997l10.219939 0q11.241933 1.021994 27.082837 5.109969t33.725798 12.263926 33.214801 23.505859 25.549847 39.346764 10.219939 58.764647l0 231.992608z" p-id="4684" fill="#d4237a"></path></svg>',
                    symbolSize:10,
                    color:'red'
                }
        }]
    })
})
</script>

<style lang="scss" scoped>
.box {
    // color: rgb(11, 23, 159);
}
</style>
